<script lang="ts">
  import { computed, defineComponent, PropType } from '@vue/composition-api';
  import OtoButton from '@/components/common/oto-button.vue';
  import { FOLLOW_STATUS } from '@/enum/dynamic.enum';

  type PropsType = {
    status: FOLLOW_STATUS;
  };
  export default defineComponent({
    components: {
      OtoButton
    },
    props: {
      status: {
        type: Number as PropType<PropsType['status']>,
        require: true
      }
    },
    setup(props, { emit }) {
      const buttonText = computed(() => {
        if (props.status === FOLLOW_STATUS.FOLLOW) {
          return '已关注';
        }
        return '未关注';
      });

      const buttonColor = computed(() => {
        if (props.status === FOLLOW_STATUS.NOT_FOLLOW) {
          return '#d6d7d7';
        }
        return '#81d8de';
      });

      function changeStatus() {
        const status = props.status === FOLLOW_STATUS.FOLLOW ? FOLLOW_STATUS.NOT_FOLLOW : FOLLOW_STATUS.FOLLOW;
        emit('change', status);
      }
      return {
        buttonText,
        buttonColor,
        changeStatus
      };
    }
  });
</script>

<template>
  <view class="follow-button">
    <oto-button
      :custom-style="{
        fontSize: '28rpx',
        background: buttonColor
      }"
      @click.stop="changeStatus"
    >
      {{ buttonText }}
    </oto-button>
  </view>
</template>

<style lang="scss" scoped>
  .follow-button {
    width: 110rpx;
    height: 50rpx;
  }
</style>
